<!DOCTYPE html>
<html>
<head>
<title>Potential Well with Delta Function</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    canvas {
        border: 1px solid #ccc;
        background-color: #fff;
    }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2.5;
ctx.lineCap = 'butt'; 

// --- Coordinate Definitions ---
const width = canvas.width;
const height = canvas.height;
const margin = { top: 60, bottom: 80, left: 70, right: 70 };
const yAxisPos = height - margin.bottom;
const xAxisPos = margin.left;
const xStart = xAxisPos;
const xEnd = width - margin.right;

const x0 = xStart;
const xL = xEnd;
const xL_2 = (xStart + xEnd) / 2;

const plotHeight = yAxisPos - margin.top;
const wallTopY = margin.top;
const spikeTopY = margin.top + 30;

// --- Clear canvas ---
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'black';

// --- Draw Axes ---
// X-axis
ctx.beginPath();
ctx.moveTo(xStart - 50, yAxisPos);
ctx.lineTo(xEnd + 30, yAxisPos);
ctx.stroke();

// Y-axis
ctx.beginPath();
ctx.moveTo(xStart, yAxisPos + 10);
ctx.lineTo(xStart, margin.top - 30);
ctx.stroke();

// --- Draw Potential V(x) ---
// Infinite wall at x=0
ctx.beginPath();
ctx.moveTo(x0, yAxisPos);
ctx.lineTo(x0, wallTopY);
ctx.stroke();

// Infinite wall at x=L
ctx.beginPath();
ctx.moveTo(xL, yAxisPos);
ctx.lineTo(xL, wallTopY);
ctx.stroke();

// Delta function spike at x=L/2
ctx.save();
ctx.lineWidth = 3;
const spikeBaseHalf = 20;
const spikeTopHalf = 4;
const curveEndHeight = 110;
const curveControlYOffset = 90;

const curveEndY = yAxisPos - curveEndHeight;

// Left Side
ctx.beginPath();
ctx.moveTo(xL_2 - spikeBaseHalf, yAxisPos);
ctx.quadraticCurveTo(xL_2, yAxisPos - curveControlYOffset, xL_2 - spikeTopHalf, curveEndY);
ctx.lineTo(xL_2 - spikeTopHalf, spikeTopY);
ctx.stroke();

// Right Side
ctx.beginPath();
ctx.moveTo(xL_2 + spikeBaseHalf, yAxisPos);
ctx.quadraticCurveTo(xL_2, yAxisPos - curveControlYOffset, xL_2 + spikeTopHalf, curveEndY);
ctx.lineTo(xL_2 + spikeTopHalf, spikeTopY);
ctx.stroke();
ctx.restore();


// --- Add Labels ---
ctx.textAlign = 'center';

// V(x) and x labels
ctx.font = 'bold 24px serif';
ctx.textBaseline = 'bottom';
ctx.fillText('V(x)', x0, margin.top - 30);

ctx.textBaseline = 'middle';
ctx.fillText('x', xEnd + 40, yAxisPos);

// Axis values
ctx.font = 'bold 22px serif';
ctx.textBaseline = 'top';
ctx.fillText('0', x0, yAxisPos + 10);
ctx.fillText('L/2', xL_2, yAxisPos + 10);
ctx.fillText('L', xL, yAxisPos + 10);

// Tick mark for L/2
ctx.save();
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(xL_2, yAxisPos);
ctx.lineTo(xL_2, yAxisPos + 8);
ctx.stroke();
ctx.restore();

// Figure caption
ctx.font = '20px serif';
ctx.textBaseline = 'bottom';
ctx.fillText('Fig. 1.11', width / 2, height - 15);

</script>
</body>
</html>